<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>人员监控</title>
    <link href="/css/style.css" type="text/css" rel="stylesheet">
    <link href="/css/monitor.css?v=4" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="/css/layui.css" media="all">
    <!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="css/ie.css"/>
    <![endif]-->
    <!--[if lte IE 9]>
    <script>alert("您正在使用的浏览器版本过低，为了您的最佳体验，请先升级浏览器。");
    window.location.href = "http://support.dmeng.net/upgrade-your-browser.html?referrer=" + encodeURIComponent(window.location.href);</script>
    <![endif]-->

    <style>
        body, html {
            height: 100%;
            min-width: 1600px;
            overflow: hidden;
        }

        ::-webkit-scrollbar {
            height: 10px;
            overflow: visible;
            width: 6px;
        }

        ::-webkit-scrollbar-corner {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #033b70;
            background-clip: padding-box;
            border: 1px solid #03437a;
            border-width: 1px;
            min-height: 28px;
            max-height: 100px;
            padding: 10px 0 0;
            box-shadow: inset 0 0 2px hsla(0, 0%, 100%, .25);
        }
        .header .layui-nav {
            position: absolute;
            right: 0;
            top: 0;
            padding: 0;
            background: none;
        }
    </style>
    <link type="text/css" rel="stylesheet" charset="UTF-8" href="https://translate.googleapis.com/translate_static/css/translateelement.css">
    <script type="text/javascript" charset="UTF-8" src="https://translate.googleapis.com/translate_static/js/element/main_zh-CN.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://translate.googleapis.com/element/TE_20200506_00/e/js/element/element_main.js"></script>
</head>

<body style="background:#050e32;">

<div class="header">
    <em><img src="/images/time_icon.png"><a style="color:#2c9eff;" class="showDate"></a></em>
    <div class="wrap"><p>山东威尔数据股份有限公司安全化智能云平台 &nbsp;&mdash;&nbsp; 人员监控</p></div>
</div>

<div class="botm">
    <div class="box botm_lf">
        <div class="btm_space"></div>
        <div class="btm_cont lit">
            <div class="cont_lt"><img src="/images/perng_lt_icon.png"></div>
            <div class="cont_rt"><img src="/images/perng_rt_icon.png"></div>
            <div class="cont_lb"><img src="/images/perng_lb_icon.png"></div>
            <div class="cont_rb"><img src="/images/perng_rb_icon.png"></div>
            <div class="cont_title">今日统计</div>
            <div class="art_box" style="overflow:hidden" id="today_total">

            </div>
        </div>
        <div class="btm_space"></div>
        <div class="btm_cont big">
            <!--<div class="cont_more"><a href="">更多</a></div>-->

            <div class="cont_lt"><img src="/images/perng_lt_icon.png"></div>
            <div class="cont_rt"><img src="/images/perng_rt_icon.png"></div>
            <div class="cont_lb"><img src="/images/perng_lb_icon.png"></div>
            <div class="cont_rb"><img src="/images/perng_rb_icon.png"></div>
            <div class="cont_title">人员历史记录</div>
            <div class="art_box" style="height:400px;">
                <table width="100%" border="0" class="tab_list">
                    <tbody id="history_list">

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="box botm_cen">
        <div class="btm_space"></div>
        <div class="btm_cont">
            <div class="cont_lt"><img src="/images/perng_lt_icon.png"></div>
            <div class="cont_rt"><img src="/images/perng_rt_icon.png"></div>
            <div class="cont_lb"><img src="/images/perng_lb_icon.png"></div>
            <div class="cont_rb"><img src="/images/perng_rb_icon.png"></div>
            <div class="cont_title">当前人员监控信息</div>
            <div class="art_box" style="overflow: hidden;">
                <div class="now_top">
                    <div style=" height:85%;width:78%; margin:0 auto; margin-top:6px; position:relative;">



                        <div class="per_img lf">
                            <img class="manBorder" src=""
                                 onerror="imgerror(this);" alt=""/>
                        </div>

                        <div class="per_img rt">
                            <img class="imgTwo" src=""
                                 onerror="imgerror(this)" alt=""/>
                        </div>

                    </div>

                    <h4 class="ischeck_pass">验证通过</h4>
                </div>
                <div class="now_btm">
                    <div class="mes_box">
                        <h2>
                            <a href="#" class="a_act">个人信息</a>
                        </h2>
                        <div class="h2_box">
                            <table width="100%" border="0">
                                <tbody>
                                <input type="hidden" id="recordId"/>
                                <tr>
                                    <td width="33.33%"><p>姓名</p><h5 class="lfrxm"></h5></td>
                                    <td width="33.33%"><p>体温(℃)</p><h5
                                            class="visitorGender"></h5></td>
                                    <td><p>民族</p><h5 class="visitorNation"></h5></td>
                                </tr>
                                <tr>
                                    <td width="46%"><p>身份证号</p><h5 class="idNo"></h5></td>
                                    <td colspan="2"><p>访问时间</p><h5 class="fullLfsj"></h5>
                                    </td>
                                </tr>

                                <tr>
                                    <td colspan="3"><p>家庭住址</p> <h5
                                            class="visitorAddress"></h5></td>
                                </tr>
                                <tr>
                                    <td colspan="3"><p>常出没地</p><h5 class="hsbc">&nbsp;</h5></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="befo_box">
                        <div class="slide_cont">
                            <ul id="person_his">

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="box botm_rt">
        <div class="btm_space"></div>
        <div class="btm_cont lit">
            <div class="cont_lt"><img src="/images/perng_lt_icon.png"></div>
            <div class="cont_rt"><img src="/images/perng_rt_icon.png"></div>
            <div class="cont_lb"><img src="/images/perng_lb_icon.png"></div>
            <div class="cont_rb"><img src="/images/perng_rb_icon.png"></div>
            <div class="cont_title">今日访问分类</div>
            <div class="art_box" style="overflow: hidden;">
                <ul class="fwfl_top">
                    <li><h3 class="minitorys">0<em>个</em></h3>
                        <p>少数民族</p></li>
                    <li><h3 class="employeeNum">0<em>个</em></h3>
                        <p>内部人员</p></li>
                    <li><h3 class="alarmsNum">0<em>个</em></h3>
                        <p>预警</p></li>
                    <li><h3 class="visitorsNum">0<em>个</em></h3>
                        <p>陌生人</p></li>
                </ul>
                <div class="fwfl_btm" id="today_class">
                </div>
            </div>
        </div>
        <div class="btm_space"></div>
        <div class="btm_cont big">
            <div class="cont_lt"><img src="/images/perng_lt_icon.png"></div>
            <div class="cont_rt"><img src="/images/perng_rt_icon.png"></div>
            <div class="cont_lb"><img src="/images/perng_lb_icon.png"></div>
            <div class="cont_rb"><img src="/images/perng_rb_icon.png"></div>
            <div class="cont_title">预警信息</div>
            <div class="art_box" style="height:400px;">
                <table width="100%" border="0" class="tab_list tab_list_yj">
                    <tbody id="person_warn">

                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

</body>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->


<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/style.js"></script>
<script type="text/javascript" src="/js/echarts.min.js"></script>
<script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>

<script type="text/javascript" src="/js/layer.js?v=2"></script>

<script type="text/javascript">

    function openBox(recordid) {
        layer.open({
            type: 2 //此处以iframe举例
            , title: '预警提醒'
            , area: ['360px', '400px']
            , shade: 0.3
            //, id: 'LAY_layuipro' //设定一个id，防止重复弹出
            , maxmin: true
            , offset: [ //为了演示，随机坐标
                Math.random() * ($(window).height() - 300), Math.random() * ($(window).width() - 400)
            ]
            , content: '/crm/record/person/current/reminderBox?id=' + recordid
            , btn: ['确认', '全部关闭'] //只是为了演示
            , yes: function (index, layero) {
                document.getElementById("sound").pause();
                layer.close(index);
            }
            , btn2: function () {
                document.getElementById("sound").pause();
                layer.closeAll();
            }
            , zIndex: layer.zIndex //重点1
        });

    }

    //取得系统当前时间
    function getTime() {
        var mydate = new Date();
        var myddy = mydate.getDay();
        var time = format(mydate);
        var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        $(".showDate").html(time + '&nbsp;&nbsp;' + weekday[myddy]); //将值赋给div
    }

    $(function () {
        setInterval("getTime();", 1000);
        /*setInterval("reload();", 20000);*/
        setTimeout(function () {
            setInterval("current();", 2000);
        }, 1000);
        setTimeout(function () {
            setInterval("queryHistory();", 2000);
            setInterval("initBarchart();", 2000);
        }, 1000);
        setTimeout(function () {
            setInterval("personWarnList();", 2000);
        }, 2000);
        setTimeout(function () {
            setInterval("piechartDataRedis();", 2000);
        }, 2500);
    });

    //当前人员监控信息
    function current() {
        let reid = $("#recordId").val();

        $.ajax({
            url: '/person/monitor/getCurrentMonitor',
            type: "get",
            dataType: 'json',
            success: function (result) {
                if(result.code == 600){
                    var obj = result.data;

                    //当前监控照片
                    var frame = obj.frame;
                    $(".manBorder").attr('src', frame);

                    //当前人员档案照片
                    var photoUrl = obj.photoUrl;

                    $(".imgTwo").attr('src', photoUrl);

                    $(".manBorder").attr('src', frame);

                    //个人信息
                    var user =  obj.user;
                    //姓名
                    $(".lfrxm").html(user.userLname);
                    //体温
                    //$(".visitorGender").html(record.lfwp);
                    //民族
                    $(".visitorNation").html(user.userNation);
                    //身份证号
                    $(".idNo").html(user.userId);
                    //家庭住址
                    $(".visitorAddress").html(user.userAddress);

                    var visitTime ;
                    var kts = obj.kts;

                    $("#person_his").empty();
                    $("#person_his").after('');
                    for (var i = 0; i < kts.length; i++) {

                        var record = kts[i];

                        /*var address = record.mc;
                        if (address = '' || address == undefined ) {
                            address = "未知"
                        }*/
                        var url = record.frameUrl;
                        var time = record.sj;
                        //用于个人信息中访问时间的显示
                        if(i == 0) {
                            visitTime =time;
                        }

                        if (i % 2 == 0) {
                            var str = '<li>' +
                                '<div class="wz"><span><img src="'+url+'"></span></div>' +
                                '<h6><em></em></h6>' +
                                '<div class="wz">' +
                                '	<h2>' +record.mc+ '</h2>' +
                                '	<p>' + time  + '</p>' +
                                '</div></li>';
                            $("#person_his").append(str);
                        } else {
                            var str = '<li class="li_odd">' +
                                '<div class="wz">' +
                                '	<p>' + time  + '</p>' +
                                '	<h2>' + record.mc + '</h2>' +
                                '</div>' +
                                '<h6><em></em></h6>' +
                                '<div class="wz"><span><img src="'+url+'"></span></div></li>';
                            $("#person_his").append(str);
                        }
                    }
                    $("#person_his").after('<span class="pre_btn"><img src="/images/_arrow_lf.png"></span><span class="next_btn"><img src="/images/_arrow_rt.png"></span>');
                    preOrNext();

                    //访问时间
                    $(".fullLfsj").html(visitTime);

                    // var record = data.firstListParams;
                    // var date = new Date(record.lfsj);
                    // var time = format(date);
                    // $(".womanBorder").attr('src', "http://120.79.234.251//resource/" + record.xcz);
                    // $(".imgTwo").attr('src', "http://120.79.234.251//resource/" + record.rlz);
                    // $('.imgTwo,.womanBorder,.manBorder').error(function () {
                    //     $(this).attr('src', "/images/lxn-boxImg.png");
                    // })
                    // $(".mask").html('<span>' + record.matching + '</span>%');
                    // $('.circle').each(function (index, el) {
                    //     var num = $(this).find('span').text() * 3.6;
                    //     if (num <= 180) {
                    //         $(this).find('.right').css('transform', "rotate(" + num + "deg)");
                    //         $(this).find('.left').css('transform', "rotate(" + 0 + "deg)");
                    //     } else {
                    //         $(this).find('.right').css('transform', "rotate(180deg)");
                    //         $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
                    //     }
                    // });
                    //
                    //
                    //
                    // $(".visitorNation").html(record.visitorNation);
                    // $(".fullLfsj").html(record.fullLfsj);
                    // $(".visitorAddress").html(record.visitorAddress);
                    // $(".lfly").html(record.lfly);
                    // $(".bfrxm").html(record.bfrxm);
                    // $(".operatorGender").html(record.operatorGender);
                    // $("#personName").val(record.lfrxm);
                    // $("#personId").val(record.lfrid);
                    // $("#recordId").val(record.id);
                    //
                    // //验证方式 0是1:1   2是1：N
                    // if (record.vertify != undefined && record.vertify == 2) {
                    //     $("#vertify").attr("src", "/images/lxn-perface.png")
                    // } else {
                    //     $("#vertify").attr("src", "/images/lxn-perid.png")
                    // }
                    //
                    // if (record.matching != undefined && record.matching >= 75) {
                    //     $(".ischeck_pass").html('验证通过');
                    // } else {
                    //     $(".ischeck_pass").html('验证不通过');
                    // }
                    // queryPersonHis();
                    //
                    // let rid = record.id;
                    //
                    // /*高温报警-提示音record.lfwp//温度*/
                    // if (rid != reid && record.lfwp > '37.2') {
                    //     var audio = document.getElementById('sound');
                    //     if (audio.paused) {
                    //         audio.play();//audio.play();// 这个就是播放
                    //     }
                    //     openBox(record.id);
                    // }
                    //


                }

            },
            error: function (data) {
                // alert("请求失败");
            }
        });
    }

    //人员历史记录
    function queryHistory() {
        $.ajax({
            url: '/person/monitor/todayRecord',
            type: "GET",
            dataType: 'json',
            success: function (data) {
                var count = data.count;
                if(count != 0){
                    var list = data.list;
                    $("#history_list").empty();
                    for (var i = 0; i < list.length; i++) {
                        var record = list[i];
                        //人员名称
                        var userLname = record.userLname;
                        //部门名称
                        var userDepname = record.userDepname;
                        //员工工号
                        var userNo = record.userNo;
                        if (userLname == undefined) {
                            userLname = '未知';
                        }
                        //员工工号
                        var userNo = record.fx;
                        var inOut = '';
                        if(record.fx == 1){
                            inOut = '进';
                        }else if(record.fx == 2){
                            inOut = '出';
                        }
                        var str = '<tr>' +
                            '<td><span><img src="'+record.completePhotoPath+'" onerror="imgerror(this);";></span></td>' +
                            '<td>' + userLname + '</td>' +
                            '<td>' + userDepname + '</td>' +
                            '<td>' + inOut + '</td>' +
                            '<td>' + record.sj + '</td>' +
                            '</tr>';
                        $("#history_list").append(str);
                    }
                }

                // $(".is_pass").each(function () {
                //     queryDevice(this);
                // });
                // $(".is_pass").css("display", "");
            },
            error: function (data) {
                // alert("请求失败");
            }
        });
    }

    function imgerror(obj) {
        $(obj).attr("src", "/images/lxn-man.png");
    }

    function imgerrorWoman(obj) {
        $(obj).attr("src", "/images/lxn-woman.png");
    }

    $(function () {
        //今日进出统计图
        initBarchart();
        //人员历史记录
        queryHistory();

        current();
        //预警信息
        personWarnList();
        piechartDataRedis();
    });

    //人员预警信息
    function personWarnList() {
        $.ajax({
            url: '/person/monitor/warn',
            type: "get",
            dataType: 'json',
            success: function (result) {
                var  code = result.code;
                if(code == 600){
                    $("#person_warn").empty();
                    var array  = result.data;
                    var date = new Date();
                    var time = format(date);
                    for (var i = 0; i < array.length; i++) {
                        var obj = array[i];
                        var imgUrl = obj.photoPath;
                        var userName = obj.userLname;
                        if(userName == null){
                            userName = '';
                        }
                        var userSerial = obj.userSerial;
                        var doorState = obj.doorState;
                        var time = obj.sj;
                        var str = '<tr>' +
                            '<td><span><img src="'+imgUrl+'" onerror="imgerror(this);"></span></td>' +
                            '<td>' + userName + '</td>' +
                            '<td>' + doorState + '</td>' +
                            '<td>' + userSerial + '</td>' +
                            '<td>' + time + '</td>' +
                            '</tr>';
                        $("#person_warn").append(str);
                    }
                }
            }
        });
    }
    //今日访问分类饼状图
    function piechartDataRedis() {

        $.ajax({
            url: '/person/monitor/todayVisits',
            type: "get",
            dataType: 'json',
            success: function (result) {
               var  code = result.code;
               if(code == 600){
                   var data  = result.data;
                   //内部数量
                   var insideCount = data.insideCount;
                   $(".employeeNum").html(insideCount + "<em>个</em>");
                   //预警
                   var warnCount = data.warnCount;
                   $(".alarmsNum").html(warnCount + "<em>个</em>");
                   //少数民族
                   var ethnicMinorityCount = data.ethnicMinorityCount;
                   $(".minitorys").html(ethnicMinorityCount + "<em>个</em>");

                   //陌生人
                   var visitorsNum = data.visCount;
                   $(".visitorsNum").html(visitorsNum + "<em>个</em>");

                   var myChart = echarts.init(document.getElementById('today_class'));
                   option = {
                       tooltip: {
                           trigger: 'item',
                           formatter: "{a} <br/>{b}: {c} ({d}%)"
                       },
                       legend: {
                           orient: 'vertical',
                           top: "middle",
                           right: "15%",
                           data: ['少数民族', '内部人员', '预警', '陌生人'],
                           textStyle: {
                               color: "#027ab7"
                           }
                       },
                       series: [
                           {
                               name: '访问来源',
                               type: 'pie',
                               radius: ['60%', '80%'],
                               center: ['40%', '48%'],
                               avoidLabelOverlap: false,
                               itemStyle: {
                                   normal: {
                                       color: function (params) {
                                           var colorList = [
                                               '#00a1e4', '#ffd900', '#24c768', '#ff7e00'
                                           ];
                                           return colorList[params.dataIndex]
                                       },
                                       label: {
                                           show: true,
                                           position: 'top',
                                           formatter: '{c}个'
                                       }

                                   }

                               },

                               label: {
                                   normal: {
                                       show: false,
                                       position: 'center'
                                   },
                                   emphasis: {
                                       show: true,
                                       textStyle: {
                                           fontSize: '30',
                                           fontWeight: 'bold'
                                       }
                                   }
                               },
                               labelLine: {
                                   normal: {
                                       show: false
                                   }
                               },
                               data: [
                                   {value: ethnicMinorityCount, name: '少数民族'},
                                   {value: insideCount, name: '内部人员'},
                                   {value: warnCount, name: '预警'},
                                   {value: visitorsNum, name: '陌生人'}
                               ]
                           }
                       ]
                   };
                   myChart.setOption(option);
               }
            }
        });
    }

    function format(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();
        if (month < 10) month = "0" + month;
        if (day < 10) day = "0" + day;
        if (hour < 10) hour = "0" + hour;
        if (min < 10) min = "0" + min;
        if (sec < 10) sec = "0" + sec;
        return (year + '-' + month + '-' + day + " " + hour + ":" + min + ":" + sec);
    }

    function preOrNext() {
        var bh = $(window).height();
        var Hg = $(".header").height();
        $(".botm").height(bh - Hg);
        $(".botm .box .btm_cont").each(function (i) {
            var btH = $(this).height();
            $(this).children(".art_box").height(btH - 50);
        });
        var liH = $(".art_box .fwfl_top li").height();
        $(".art_box .fwfl_top li").children("h3").css({
            "line-height": 0.3 * liH + "px",
            "margin-top": 0.2 * liH + "px"
        });
        $(".art_box .fwfl_top li").children("p").css({
            "line-height": 0.3 * liH + "px",
            "margin-bottom": 0.2 * liH + "px"
        });
        var heH = $(".art_box .now_top h4").height();
        $(".art_box .now_top h4").css("line-height", heH + "px");
        var mesH = $(".art_box .now_btm .mes_box").height();
        $(".now_btm .mes_box .h2_box").css("height", mesH - 47);
        var liW = $(".befo_box .slide_cont").width();
        $(".befo_box .slide_cont li").css({"width": 0.333 * liW + "px"});
        $(".botm_car .befo_box .slide_cont li").css({"width": 0.2 * liW + "px"});
        var ssh = $(".befo_box .slide_cont li").width();
        var len = liW / ssh;
        var li_shu = $(".slide_cont li").length;
        if (li_shu > len) {
            $(".befo_box .next_btn,.befo_box .pre_btn").show();
        } else {
            $(".befo_box .next_btn,.befo_box .pre_btn").hide();
        }
        var lf0 = liW - li_shu * ssh;
        var num = 0;
        $(".next_btn").click(function () {
            num++;
            var sss = ssh * num;
            if (num >= li_shu - len) {
                num = li_shu - len;
                $(".slide_cont ul").stop().animate({marginLeft: lf0}, 600);
            } else {
                $(".slide_cont ul").stop().animate({marginLeft: -sss}, 600);
            }
        });

        $(".pre_btn").click(function () {
            num--;
            var sss = ssh * num;
            if (num <= 0) {
                num = 0;
                $(".slide_cont ul").stop().animate({marginLeft: 0}, 600);
            } else {
                $(".slide_cont ul").stop().animate({marginLeft: -sss}, 600);
            }
        });
    }

    //今日统计 进，出表
    function initBarchart() {
        $.ajax({
            url: '/person/monitor/countTodayFx',
            type: "get",
            dataType: 'json',
            success: function (data) {
                var myChart = echarts.init(document.getElementById('today_total'));
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['内部人员', '外部人员'],
                        textStyle: {
                            color: "#027ab7"
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#027ab7'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['进', '出'],
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#027ab7'
                            }
                        }
                    },
                    series: [
                        {
                            name: '内部人员',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {
                                normal: {
                                    color: '#fb7293',
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            data: [data.inCount,data.outCount]
                        },
                        {
                            name: '外部人员',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {
                                normal: {
                                    color: '#8378ea',
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                }
                            },
                            data: [0, 0]
                        }
                    ]
                };
                myChart.setOption(option);
            },
            error: function (data) {
                // alert("请求失败");
            }
        });
    }
</script>
</html>
